<template>
  <div>
    <el-table :data="filterTableData" style="width: 100%" >
      <el-table-column label="实验室名称">
        <template #default="scope">
          <el-link type="primary" @click="handleLocation(scope.row)">{{scope.row.lab.title}}</el-link>
        </template>
      </el-table-column>

      <el-table-column label="预约人">
        <template #header>                    <!--自定义搜索框表头-->
          <el-input v-model="search" size="small" placeholder="请输入用户名"></el-input>
        </template>
        <template #default="scope">
          <div>{{scope.row.book_username}}</div>
        </template>
      </el-table-column>

      <el-table-column label="预约时间">
        <template #default="scope">
          <el-tag style="height: 40px; line-height: 20px">
            {{moment(scope.row.book_time).format("YYYY-MM-DD")}}<br>
            {{class_method(scope.row.book_class)}}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="预约状态">
        <template #default="scope">
          <el-tag :type="book_state_type[scope.row.book_state]">
            {{book_state_text[scope.row.book_state]}}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <el-popconfirm
              title="确认批准该预约?"
              confirm-button-text="确认"
              cancel-button-text="取消"
              @confirm="handleUpdate(scope.row,APPROVE)"
          >
            <template #reference>
              <el-button type="primary"
                         round
              >批准</el-button>
            </template>
          </el-popconfirm>
          <el-popconfirm
              title="确认驳回该预约?"
              confirm-button-text="确认"
              cancel-button-text="取消"
              @confirm="handleUpdate(scope.row,REJECT)"
          >
            <template #reference>
              <el-button type="danger"
                         round
              >驳回</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--      预览实验室-->
    <el-dialog v-model="dialogVisible" title="实验室位置" :fullscreen="true" v-if="dialogVisible">
      <LabMap :x="currentItem.x" :y="currentItem.y" :t="currentItem.title"></LabMap>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, onMounted, computed} from "vue";
import axios from "axios";
import {ClassType,book_state_text,book_state_type,AUDIT,APPROVE,REJECT} from "../../util/type.js"
import LabMap from "../../components/lab-manage/LabMap.vue";
import {useUserStore} from "../../store/useUserStore.js"
import moment from 'moment'
import {ElMessage} from "element-plus";

const tableData=ref([])
const {user}=useUserStore()
const search=ref("")

//渲染列表
onMounted(()=>{
  getlablist()
})
const getlablist=async () =>{
  var res
    res=await axios.get(`/adminapi/books?book_state=${AUDIT}`)
  tableData.value=res.data
}
//预览实验室
const dialogVisible=ref(false)
const currentItem=ref({});
const handleLocation=(item)=>{
  dialogVisible.value=true
  currentItem.value=item.lab
}

//渲染课节
const class_method=(value)=>{
  return ClassType.find(item=>item.value===value).label
}

//批准/驳回预约
const handleUpdate=async ({id},state)=>{
  await axios.put(`/adminapi/books/${id}`,{
    book_state:state
  })
  await getlablist()
  ElMessage({
    message:"审核成功！",
    type:"success"
  })
}

//过滤搜索用户的预约
const filterTableData=computed(()=>{
  return tableData.value.filter(item=>!search.value||item.book_username.includes(search.value))
})

</script>

<style scoped>

</style>